{extend name="light-year/layout/default" /}

{block name="content"}
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-6 col-lg-3">
            <div class="card bg-primary">
                <div class="card-body clearfix">
                    <div class="pull-right">
                        <p class="h6 text-white m-t-0">今日收入</p>
                        <p class="h3 text-white m-b-0 fa-1-5x">102,125.00</p>
                    </div>
                    <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-currency-cny fa-1-5x"></i></span> </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-3">
            <div class="card bg-danger">
                <div class="card-body clearfix">
                    <div class="pull-right">
                        <p class="h6 text-white m-t-0">用户总数</p>
                        <p class="h3 text-white m-b-0 fa-1-5x">920,000</p>
                    </div>
                    <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-account fa-1-5x"></i></span> </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-3">
            <div class="card bg-success">
                <div class="card-body clearfix">
                    <div class="pull-right">
                        <p class="h6 text-white m-t-0">下载总量</p>
                        <p class="h3 text-white m-b-0 fa-1-5x">34,005,000</p>
                    </div>
                    <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-arrow-down-bold fa-1-5x"></i></span> </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-3">
            <div class="card bg-purple">
                <div class="card-body clearfix">
                    <div class="pull-right">
                        <p class="h6 text-white m-t-0">新增留言</p>
                        <p class="h3 text-white m-b-0 fa-1-5x">153 条</p>
                    </div>
                    <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-comment-outline fa-1-5x"></i></span> </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h4>系统信息</h4>
                </div>
                <div class="card-body">
                        <p class="alert alert-success sl-line-height25">
                        PHP版本：{:phpversion()}<br>
                        PHP运行环境：{:php_sapi_name()}<br>
                        上传附件限制：{:ini_get('upload_max_filesize')}<br>
                        服务器标识：{:$_SERVER['SERVER_SOFTWARE']}<br>
                        CGI 规范的版本：{:$_SERVER['GATEWAY_INTERFACE']}<br>
                        通信协议的名称和版本 ：{:$_SERVER['SERVER_PROTOCOL']}<br>
                    </p>
                    <p class="alert alert-info sl-line-height25">
                        浏览器信息：{:$_SERVER['HTTP_USER_AGENT']}<br>
                        服务器地址：{:$_SERVER['SERVER_NAME']}<br>
                        服务器IP：{:$_SERVER['SERVER_ADDR']}<br>
                        运行脚本目录：{:$_SERVER['DOCUMENT_ROOT']}<br>
                    </p>
                    <p class="alert alert-danger sl-line-height25">
                        数据库名称：{:env('DATABASE.DATABASE')}<br>
                        数据库端口：{:env('DATABASE.HOSTPORT')}<br>
                        用户名：{:env('DATABASE.USERNAME')}<br>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h4>管理员登录日志</h4>
                    <ul class="card-actions">
                        <li class="dropdown">
                            <a href="{:url('adminLoginLogs/index')}">
                                <i class="mdi mdi-arrow-right-bold"></i>
                                查看更多
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th> 管理员账户 </th>
                                    <th> 登录时间 </th>
                                    <th> 登录IP </th>
                                    <th> 登录状态 </th>
                                </tr>
                            </thead>
                            <tbody>
                            {if !empty($admin_login_logs)}
                                {foreach $admin_login_logs as $log}
                                    <tr>
                                        <td> {$log->admin->admin_name ?? ''} </td>
                                        <td> {$log->created_time|date="Y-m-d H:i"} </td>
                                        <td> {$log->created_ip} </td>
                                        <td>
                                            {switch $log->log_status|intval }
                                            {case 1}
                                            <span class="label label-success"> 登录成功 </span>
                                            {/case}
                                            {default /}
                                            <span class="label label-danger"> 登录失败 </span>
                                            {/switch}
                                        </td>
                                    </tr>
                                {/foreach}
                            {/if}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row">
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h4>每周用户</h4>
                </div>
                <div class="card-body">
                    <canvas class="js-chartjs-bars"></canvas>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h4>交易历史记录</h4>
                </div>
                <div class="card-body">
                    <canvas class="js-chartjs-lines"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="script-src"}
    <!--图表插件-->
    <script type="text/javascript" src="__LIGHT_YEAR__/js/Chart.js?v={:config('cnpscy.resource_version_number')}"></script>
{/block}

{block name="script"}
<script type="text/javascript">
    $(document).ready(function(e) {
        var $dashChartBarsCnt  = jQuery( '.js-chartjs-bars' )[0].getContext( '2d' ),
            $dashChartLinesCnt = jQuery( '.js-chartjs-lines' )[0].getContext( '2d' );

        var $dashChartBarsData = {
            labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            datasets: [
                {
                    label: '注册用户',
                    borderWidth: 1,
                    borderColor: 'rgba(0,0,0,0)',
                    backgroundColor: 'rgba(51,202,185,0.5)',
                    hoverBackgroundColor: "rgba(51,202,185,0.7)",
                    hoverBorderColor: "rgba(0,0,0,0)",
                    data: [2500, 1500, 1200, 3200, 4800, 3500, 1500]
                }
            ]
        };
        var $dashChartLinesData = {
            labels: ['2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014'],
            datasets: [
                {
                    label: '交易资金',
                    data: [20, 25, 40, 30, 45, 40, 55, 40, 48, 40, 42, 50],
                    borderColor: '#358ed7',
                    backgroundColor: 'rgba(53, 142, 215, 0.175)',
                    borderWidth: 1,
                    fill: false,
                    lineTension: 0.5
                }
            ]
        };

        new Chart($dashChartBarsCnt, {
            type: 'bar',
            data: $dashChartBarsData
        });

        var myLineChart = new Chart($dashChartLinesCnt, {
            type: 'line',
            data: $dashChartLinesData,
        });
    });
</script>
{/block}